<script lang="ts" setup>
// 获取顶部安全距离
import {useUserStore} from "@/stores/user";
import {ref} from "vue";
import {GlobePopupType} from "@/enum/globePopupType";


const emit = defineEmits<{
  openCalendar: []
}>()

defineProps<{
  dateDay: string
  show: boolean
}>()
const {safeAreaInsets} = uni.getSystemInfoSync()
const userStore = useUserStore()
// 获取几天日期号数
// const date = ref(new Date())
const goMy = () => {
  uni.switchTab({
    url: '/pages/my/my'
  })
}
const goSearch = () => {
  uni.navigateTo({
    url: '/subPkg/search/search'
  })
}
const goPhoto = () => {
  if (userStore.userInfoData?.userID === null) {
    return uni.showToast({title: '请先登录', duration: 3000, icon: 'none'})
  }
  uni.chooseImage({
    mediaType: ['image'],
    sourceType: ['album', 'camera'],
    count: 1, //默认9
    sizeType: ['compressed'],
    success: (res: any) => { // It's hard to find a type here
      const filePath = res.tempFiles[0].path
      if (res.tempFiles[0].size > 4 * 1024 * 1024) {
        return uni.showToast({title: '图片大小不能超过4MB', icon: 'none'})
      }
      uni.navigateTo({url: '/subPkg/photo/photo?originUrl=' + filePath})
    }
  })
  /*  uni.chooseImage({
      count: 1, //默认9
      sizeType: ['compressed'],
      sourceType: ['album','camera'], //从相册选择
      success: function (res) {
        // 将其转为base64   并获取大小
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        pathToBase64(tempFilePaths[0])
            .then(async (base64:any) => {
              // 转为图片

              // 发送给后端做处理
              await getInfoByPhotoApi(base64)
            })
            .catch((error:any) => {
              console.error("转换失败")
              console.error(error)
            })
      }
    })*/
}
const avatarError = ref(false)
const handleAvatarError = () => {
  avatarError.value = true
}
const openCalendar = () => {
  emit('openCalendar')
}
const openGlobePopup = () => {
  uni.navigateTo({
    url: '/pages/globePopup/globePopup?type=' + GlobePopupType.LOCKED
  })
}
</script>

<template>
  <uni-transition :show="show" :styles="{ paddingTop: safeAreaInsets?.top!  + 'px' }" custom-class="navbar"
                  mode-class="slide-top">

    <!--    <view class="nav-title">萌创社-->
    <!--      <view class="text">热评-->
    <!--        <text style="font-size: 10px;margin:0 10px;">●</text>-->
    <!--        趣图-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="nav-item ">
      <!--      <button style="background: red" @click="openGlobePopup">test</button>-->
      <uv-avatar size="30px" :src="userStore.userInfoData?.avatarURL"
             mode="aspectFill"
             @click="goMy"></uv-avatar>
    </view>
    <view class="nav-item input-item" @click="goSearch"><input placeholder="搜索动物朋友"
                                                               placeholder-style="color:#fff;fontSize:12px" readonly
                                                               @click="goSearch"/></view>
    <view class="nav-item flex justify-center align-center" style="width: 28px;height: 28px;position: relative"
          @click="openCalendar">
      <image src="/static/calendar.png" style="width: 100%;height: 100%"></image>
      <text class="text-white"
            style="position: absolute;top: 60%;left: 50%;transform: translate(-50%,-50%);font-size: 10px">
        {{ new Date(dateDay).getDate() }}
      </text>
    </view>
    <view class="nav-item flex justify-center align-center" style="width: 28px;height: 28px;" @click="goPhoto">
      <image src="/static/camera.png" style="width: 100%;height: 100%"></image>
    </view>
  </uni-transition>

</template>

<style lang="scss" scoped>
.navbar {
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #39c5bb;
  padding: 10px 10px 0px 10px;
  /* #ifdef H5 */
  height: 60px;
  padding-bottom: 0;
  /* #endif */
  // 固定
  position: fixed;
  z-index: 999;
  background-image: url('@/static/circle.png');
  background-size: 80% 200%;
  background-repeat: repeat-x;
  // 右上角
  background-origin: border-box;
  // 背景图片位置
  background-position: left -10px bottom 50px;
  gap: 30rpx;
  /*  .nav-title {
      position: absolute;
      color: #f1f1f1;
      left: 10px;
      top: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-family: 'Helvetica Neue', Helvetica, sans-serif;
      !* #ifdef H5 *!
      top: 15%;
      !* #endif *!

      .text {
        padding-left: 10px;
        border-left: #f1f1f1 1px solid;
        margin-left: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
      }
    }*/

  .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 64rpx;
      height: 64rpx;
    }

    input {
      border: #3ebed3 1px solid;
      border-radius: 19px;
      background-color: rgba(255, 255, 255, 0.3);
      height: 38px;
      width: 100%;
      padding-left: 80rpx;
      color: rgba(255, 255, 255, 0.83);
      background-image: url('@/static/search.png');
      background-repeat: no-repeat;
      background-position: 10px center;
      background-size: 20px;
      pointer-events: none; // 即使被disabled仍然可以触发事件

      &::placeholder {
        color: #fff;
      }
    }
  }

  .input-item {
    flex: 1;
  }


  .img {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>